<template>
  <div class="layout-all">
    <div class="layout-header" >
          <el-button
            type="primary"
            icon="el-icon-plus"
            style="margin-left:0px"
            @click="onAdd"
          >添加</el-button>
      </div>
      <el-table
        :data="navigation"
        stripe
        align="center"
        highlight-current-row
        :style="'width: '+(isMobile()?'100%':'50%')"
      > 
        <el-table-column align="center" prop="title" label="名称" width="120"/>
        <el-table-column align="center" prop="thumb" label="封面" width="80">
          <template slot-scope="scope">
            <pre-view :src="scope.row.thumb" width="50px" height="50px"/>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="url" label="路径" />
        <el-table-column align="center" prop="status" label="是否启用" width="80">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.status === 1 ? 'primary' : 'success'"
              size="mini"
              @click="scope.row.status=scope.row.status==1?0:1"
            >{{ scope.row.status === 1 ? "是" : "否" }}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="telephone"
          width="220"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button-group>
              <el-button size="mini" round type="success" :disabled="scope.$index<navigation.length-1" icon="el-icon-top" @click="sort(scope.$index,0)"/>
              <el-button size="mini" round type="warning" :disabled="scope.$index>0" icon="el-icon-bottom" @click="sort(scope.$index,1)"/>
            </el-button-group>
            <el-button size="mini" round type="primary" icon="el-icon-edit" @click="onEdit(scope)"/>
            <el-button
              type="danger"
              size="mini"
              round
              icon="el-icon-delete"
              @click="onDel(scope.$index)"
            />
          </template>
        </el-table-column>
      </el-table>
      <drawer title="编辑导航" :isShow="money_visible"  @update:isShow="money_visible=false" width=".8">
      <navigation v-if="money_visible" :data="form_nav" @bk="money_visible=false" @onSubmit="submit" />
    </drawer>
  </div>
</template>

<script>
import Navigation from './form'

  export default {
    components: { Navigation},
    props:{
      navigation:{
        type:Array,
        default:[]
      }
    },
    name:"NavigationIndex",
    data() {
      return {
        form_nav:undefined,
        money_visible:false,
        index:-1,

      };
    },
    methods: {
      onAdd(){
        this.form_nav=undefined
        this.index=-1
        this.money_visible=true
      },
      sort(id,type){
        const arr=this.navigation[id]
        let i=id+1
        if(type==0){
          i=id-1
        }
        this.$set(this.navigation,id,this.navigation[i])
        this.$set(this.navigation,i,arr)
      },
      onEdit(scope){
        const form_nav={}
        for(let i in scope.row){
          form_nav[i]=scope.row[i]
        }
        this.form_nav=form_nav
        this.index=scope.$index
        this.money_visible=true
      },
      submit(form){
 
        console.log(form)
       if(this.index<0){
         this.navigation.push(form)
       }else{
         this.$set(this.navigation,this.index,form)
       }
        this.$emit('onSubmit',this.navigation);
        this.money_visible=false
      },
      onDel(index){
        this.navigation.splice(index,1)
        this.$emit('onSubmit',this.navigation);
      }
    }
  }
</script>